<template>
  <div class="com-container">
    <div
      class="com-charts"
      ref="seller_ref"
    >
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      echartInstance: null, //echarts实例化对象
      allData: null,          //服务器获取的所有数据
      currentPage: 1,        // 当前显示的页数
      totalPage: 0,         // 一共有多少页
      timerId: null,         //定时器标识
    };
  },
  mounted() {
    this.initecharts();
    this.getData();
    //屏幕大小监听事件
    window.addEventListener('resize', this.screenAdapter);
    this.screenAdapter();
  },
  destroyed(){
    clearInterval(this.timerId)
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    //1. 初始化echarts
    initecharts() {
      this.echartInstance = this.$echarts.init(this.$refs.seller_ref,'chalk'); //初始化

      //对echarts组件初始化
      const creatOption = {
        //标题
        title: {
          text: '▎柱状图',
          textStyle:{
            fontSize: 60,
          },
          left:30,
          top:20,
        },

        //柱状体位置
        grid:{
          top: '20%',
          left: '5%', 
          right: '6%', 
          bottom: '3%',
          containLabel: true, //包含坐标上的文字
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        tooltip:{
          trigger: 'axis',
          axisPointer:{
            type: 'line',
             z: 0,
            lineStyle:{
              width: 66,
              color: '#2D3443',
            },
          },
        },
        series: [
          {
            type: "bar",

            barWidth:66,  //柱条宽度

            label:{
              show: true,
              position: 'right',
              color: '#fff',
            },
            itemStyle: {
              barBorderRadius: [0, 33, 33, 0],  //设置圆角
              //设置渐变
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ 
              { 
                offset: 0, color: '#5052EE' 
              },
              { 
                offset: 1, color: '#AB6EE5' 
              }])
            },
          },
        ],
      };
      this.echartInstance.setOption(creatOption);
      
      //鼠标移入停止定时器
      this.echartInstance.on('mouseover', () =>{
        clearInterval(this.timerId);
      });
      //鼠标移出开启定时器
      this.echartInstance.on('mouseout',()=>{
        this.startInterval();
      })
    },
    //2. 获取数据
    async getData() {
      const { data: ret } = await this.$axios.get("seller");
      //this.allData = ret.data; 后端使用（java）
      this.allData = ret;
      //对allData进行排序
      this.allData.sort( (a,b) =>{
        return a.value - b.value; //从小到大排序
        //return b.value - a.value; //从大到小排序
      })
      //计算总页数
      this.totalPage = this.allData.length %5 === 0 ? parseInt(this.allData.length / 5) : parseInt(this.allData.length / 5 + 1);
      //console.log('1111111:'+this.totalPage)
      this.updateecharts();
      //启动定时器
      this.startInterval();
    },
    //3. 更新echarts
    updateecharts() {

      //分页显示
      const start = (this.currentPage - 1) * 5
      const end = this.currentPage * 5
      const showData = this.allData.slice(start, end)

      const echartsNames = showData.map( (item) =>{
        return item.name
      } );
      const echartsValues = showData.map( (item) =>{
        return item.value;
      })
      const dataOption = {
        yAxis: {

          data: echartsNames,
        },
        series: [
          {
            data: echartsValues,
          },
        ],
      };
      this.echartInstance.setOption(dataOption)
    },
    //定时器
    startInterval(){
      if (this.timerId) {
        clearInterval(this.timerId)
      }
        this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateecharts()
      }, 3000)
    },
    //屏幕大小变化，完成自动适配器
    screenAdapter(){
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6;
      // 和分辨率大小相关的配置项
      const adapterOption = {
        //标题
        title: {
          textStyle:{
            fontSize: titleFontSize,
          },
        },
        tooltip:{
          axisPointer:{
            lineStyle:{
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth:titleFontSize,  //柱条宽度
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],  //设置圆角
            },
          },
        ],
      };

      this.echartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果 
      this.echartInstance.resize()
    }
  },

  components: {
    ...mapState(['theme'])
  },
};
</script>

<style lang='' scoped>
</style>
